<template>
  <div class="mt-[20px]">
    <CustomTitle title="生产分析" class="mb-[20px]"> </CustomTitle>
    <div class="!text-[16px] flex-col w-full h-[360px] overflow-y-auto text-[#E6E6E6] px-[20px] py-[20px] bg-[#1B1B1B] mt-[10px] rounded-[10px] items-center">
      <div class="w-full flex items-start">
        <div class="title flex items-center flex-shrink-0 w-[140px] text-[14px] justify-center bg-[#242424] py-[7px] px-[6px]">
          <span>分析项目</span>
        </div>
        <div class="ml-[30px]">
          <div class="min-w-[140px] flex items-center justify-center bg-[#242424] py-[6px] px-[8px]">
            <span class="!text-[14px]">{{ data.analysis_project }}</span>
          </div>
        </div>
      </div>
      <div class="w-full flex items-start mt-[10px]">
        <div class="title flex items-center flex-shrink-0 w-[140px] text-[14px] justify-center bg-[#242424] py-[7px] px-[8px]">
          <span>取样点位</span>
        </div>
        <div class="ml-[30px]">
          <a-space :size="15" wrap>
            <div
              :key="index"
              v-for="(item, index) of data.sampling_point"
              @click="handleHistory(item)"
              class="min-w-[140px] cursor-pointer flex items-center justify-center bg-[#242424] py-[7px] px-[8px]"
            >
              <span class="!text-[14px]">{{ item }}</span>
            </div>
          </a-space>
        </div>
      </div>
      <div>
        <div class="my-[10px]">在线图谱</div>
        <img :src="imgUrl" class="w-full object-fill h-[320px]" alt="示例图" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{ data: any }>();
const imgUrl = ref('');
const router = useRouter();
const handleHistory = (record: any, status: string = '') => {
  router.push({
    // path: '/data_report/history_c/detail',
    name: 'data_report_history_id',
    query: { measurement: props.data.analysis_project, sampling_pt: record, status, ip: record.device_ip, port: record.device_port },
  });
};

onMounted(() => {
  imgUrl.value = `http://${props.data.ip}:8396/images/spectrum.bmp`;
  // imgUrl.value = `https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oQ3ao.img?w=640&h=420&m=6&x=177&y=101&s=198&d=198`;
});
</script>
<style lang="less" scoped>
.title {
  height: 35px;
  position: relative;
  &::before {
    height: 35px;
    content: '';
    width: 8px;
    height: 35px;
    position: absolute;
    background: #ff9f00;
    left: 0;
  }
}
</style>
